import type { Metadata } from "next";

import Link from "next/link";

import { notFound } from "next/navigation";

import { Card } from "@/components/ui";

import { SourceLink } from "@/components/source-link";

import { StatusPill, classifyStatus } from "@/components/status-pill";

import { PartyTag } from "@/components/party-tag";

import { MemberAvatar } from "@/components/member-avatar";

import { RiderFlag, ChangeTag } from "@/components/rider-flag";

import { getBillDetail, type BillDiffChange, type BillAmendment } from "@/lib/feed";

import { formatDate, congressLabel } from "@/lib/format";

import { CiteThis } from "@/components/cite-this";

import { BillPdfViewer } from "@/components/record-archive";

export const revalidate = 300;

export function generateMetadata({

  params,

}: {

  params: { id: string };

}): Metadata {

  const numeric = parseInt(params.id.replace(/^bill:/, ""), 10);

  const bill = Number.isFinite(numeric) ? getBillDetail(numeric) : null;

  if (!bill) return { title: "Bill not found" };

  return { title: `${bill.number} - ${bill.policyArea}`, description: bill.title };

}

export default function BillPage({

  params,

}: {

  params: { id: string };

}) {

  const numeric = parseInt(params.id.replace(/^bill:/, ""), 10);

  const bill = Number.isFinite(numeric) ? getBillDetail(numeric) : null;

  if (!bill) notFound();

  const statusVariant = classifyStatus(bill.status);

  const riderCount = bill.diffs.filter((d) => d.riderFlag).length;

  const otherChanges = bill.diffs.filter((d) => !d.riderFlag);

  return (

    <div className="mx-auto w-full max-w-[860px] px-6 sm:px-8" style={{ paddingTop: "clamp(32px, 6vw, 56px)", paddingBottom: "clamp(48px, 8vw, 80px)" }}>

      {}

      <nav aria-label="Breadcrumb" style={{ marginBottom: "clamp(28px, 5vw, 44px)" }}>

        <ol style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px", marginBottom: "12px" }}>

          <li>

            <Link

              href="/"

              className="focus-ring label no-underline hover:underline"

              style={{ color: "var(--dk-signal)", fontSize: "12px", letterSpacing: "0.12em" }}

            >

              Home

            </Link>

          </li>

          <li aria-hidden="true" className="label" style={{ color: "var(--dk-ash-2)", fontSize: "12px" }}>

            /

          </li>

          <li>

            <Link

              href="/bills"

              className="focus-ring label no-underline hover:underline"

              style={{ color: "var(--dk-signal)", fontSize: "12px", letterSpacing: "0.12em" }}

            >

              Bills

            </Link>

          </li>

          <li aria-hidden="true" className="label" style={{ color: "var(--dk-ash-2)", fontSize: "12px" }}>

            /

          </li>

          <li

            className="label"

            style={{ color: "var(--dk-ash)", fontSize: "12px", letterSpacing: "0.12em" }}

            aria-current="page"

          >

            <span className="font-mono">{bill.number}</span>

          </li>

        </ol>

        <Link

          href="/bills"

          className="focus-ring no-underline hover:underline"

          style={{

            display: "inline-flex",

            alignItems: "center",

            gap: "8px",

            minHeight: "44px",

            fontFamily: "var(--font-mono), ui-monospace, monospace",

            fontSize: "13px",

            letterSpacing: "0.08em",

            color: "var(--dk-signal)",

          }}

        >

          ← Back to Bills

        </Link>

      </nav>

      {}

      <header style={{ borderBottom: "1px solid var(--dk-line)", paddingBottom: "clamp(28px, 5vw, 48px)", marginBottom: "clamp(28px, 5vw, 40px)" }}>

        {}

        <p

          className="label"

          style={{ color: "var(--dk-signal)", marginBottom: "20px", fontSize: "12px", letterSpacing: "0.14em" }}

        >

          <span className="font-mono">{bill.number}</span>

          {congressLabel(bill.congress) ? ` · ${congressLabel(bill.congress)}` : ""}

          {bill.policyArea ? ` · ${bill.policyArea}` : ""}

        </p>

        {}

        <h1

          className="font-display text-paper"

          style={{

            fontSize: "clamp(2.8rem, 9vw, 4.5rem)",

            fontWeight: 900,

            lineHeight: 1.0,

            letterSpacing: "-0.01em",

            wordSpacing: "0.06em",

            textTransform: "uppercase",

            marginBottom: "24px",

          }}

        >

          {bill.number}

        </h1>

        {}

        <p

          className="font-prose"

          style={{ fontStyle: "italic", fontSize: "clamp(1rem, 1.8vw, 1.125rem)", lineHeight: 1.55, color: "var(--dk-ash)", maxWidth: "56ch" }}

        >

          {bill.title}

        </p>

      </header>

      {}

      <section style={{ marginBottom: "clamp(24px, 4vw, 32px)" }} aria-label="Key facts">

        <div className="grid gap-4 sm:grid-cols-3">

          {}

          <div style={{ borderRadius: "10px", border: "1px solid var(--dk-line)", background: "var(--dk-surface)", padding: "clamp(18px, 3vw, 24px)" }}>

            <p className="label" style={{ color: "var(--dk-ash-2)", marginBottom: "12px", fontSize: "12px", letterSpacing: "0.12em" }}>

              Status

            </p>

            <StatusPill variant={statusVariant} dot>

              {bill.status ? "On record" : "Introduced"}

            </StatusPill>

            <p

              className="mt-3 font-prose"

              style={{ fontSize: "0.9375rem", lineHeight: 1.5, color: "var(--dk-ash)" }}

            >

              {bill.status || "No status text on file."}

            </p>

          </div>

          {}

          <div style={{ borderRadius: "10px", border: "1px solid var(--dk-line)", background: "var(--dk-surface)", padding: "clamp(18px, 3vw, 24px)" }}>

            <p className="label" style={{ color: "var(--dk-ash-2)", marginBottom: "12px", fontSize: "12px", letterSpacing: "0.12em" }}>

              Sponsor

            </p>

            {bill.sponsor ? (

              <div className="flex items-start gap-3">

                <MemberAvatar

                  name={bill.sponsor.name}

                  photoUrl={bill.sponsor.photoUrl}

                  size="md"

                />

                <div className="min-w-0">

                  <Link

                    href={bill.sponsor.href}

                    className="focus-ring font-display font-bold text-paper underline underline-offset-4 hover:text-paper"

                    style={{ fontSize: "1rem" }}

                  >

                    {bill.sponsor.name}

                  </Link>

                  <div className="mt-2 flex items-center gap-2">

                    <PartyTag party={bill.sponsor.partyCode} />

                    <span

                      className="font-mono"

                      style={{ fontSize: "0.8125rem", color: "var(--dk-ash)" }}

                    >

                      {bill.sponsor.state}

                      {bill.sponsor.district != null ? ` ${bill.sponsor.district}` : ""}

                    </span>

                  </div>

                </div>

              </div>

            ) : bill.sponsorDisplay ? (

              <p

                className="font-display font-bold text-paper"

                style={{ fontSize: "1rem" }}

              >

                {bill.sponsorDisplay}

              </p>

            ) : (

              <p

                className="font-prose italic"

                style={{ fontSize: "0.9375rem", color: "var(--dk-ash-2)" }}

              >

                No sponsor linked in the record.

              </p>

            )}

          </div>

          {}

          <div style={{ borderRadius: "10px", border: "1px solid var(--dk-line)", background: "var(--dk-surface)", padding: "clamp(18px, 3vw, 24px)" }}>

            <p className="label" style={{ color: "var(--dk-ash-2)", marginBottom: "12px", fontSize: "12px", letterSpacing: "0.12em" }}>

              Last action

            </p>

            <p

              className="font-prose text-paper"

              style={{ fontSize: "0.9375rem", lineHeight: 1.5 }}

            >

              {bill.timeline[0]?.text || "No actions on file"}

            </p>

            <p className="label mt-3" style={{ color: "var(--dk-ash-2)" }}>

              {bill.timeline[0]?.chamber ? `${bill.timeline[0].chamber} · ` : ""}

              <span className="font-mono">

                {bill.timeline[0] ? formatDate(bill.timeline[0].date) : "-"}

              </span>

            </p>

          </div>

        </div>

      </section>

      {}

      {(bill.policyArea || bill.subjects.length > 0) ? (

        <section style={{ marginTop: "16px" }} aria-label="Policy area">

          <div style={{ borderRadius: "10px", border: "1px solid var(--dk-line)", background: "var(--dk-surface)", padding: "clamp(18px, 3vw, 24px)" }}>

            <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">

              <div className="min-w-0">

                <p className="label" style={{ color: "var(--dk-ash-2)", marginBottom: "8px", fontSize: "12px", letterSpacing: "0.12em" }}>

                  Policy area

                </p>

                {bill.policyArea ? (

                  <Link

                    href={`/bills?policyArea=${encodeURIComponent(bill.policyArea)}`}

                    className="focus-ring font-display font-bold text-paper underline underline-offset-4 hover:text-paper"

                    style={{ fontSize: "1.0625rem" }}

                  >

                    {bill.policyArea}

                  </Link>

                ) : (

                  <p

                    className="font-prose italic"

                    style={{ fontSize: "0.9375rem", color: "var(--dk-ash-2)" }}

                  >

                    No policy area on file.

                  </p>

                )}

              </div>

              {bill.subjects.length > 0 ? (

                <div className="min-w-0 sm:max-w-[60%]">

                  <p className="label" style={{ color: "var(--dk-ash-2)", marginBottom: "8px", fontSize: "12px", letterSpacing: "0.12em" }}>

                    Subjects

                  </p>

                  <ul className="flex flex-wrap gap-2">

                    {bill.subjects.map((s) => (

                      <li key={s} className="pill" style={{ color: "var(--dk-ash)" }}>

                        {s}

                      </li>

                    ))}

                  </ul>

                </div>

              ) : null}

            </div>

          </div>

        </section>

      ) : null}

      {}

      <section className="mt-12" aria-label="Summary">

        <SectionLabel eyebrow="Summary" title="What this bill does" />

        {bill.summary ? (

          <div className="rounded-[6px] border border-line bg-surface p-6">

            <p

              className="font-prose text-paper"

              style={{ fontSize: "1.0625rem", lineHeight: 1.65, whiteSpace: "pre-line" }}

            >

              {bill.summary}

            </p>

            <p className="label mt-5" style={{ color: "var(--dk-ash-2)" }}>

              {bill.summarySource

                ? `Plain-language summary: ${bill.summarySource}`

                : "Plain-language summary: Congressional Research Service via GovInfo"}

            </p>

          </div>

        ) : (

          <div className="rounded-[6px] border border-line bg-surface p-6">

            <p

              className="font-prose italic"

              style={{ fontSize: "0.9375rem", color: "var(--dk-ash)" }}

            >

              Plain-language summary not yet available - read the official text

              below.

            </p>

          </div>

        )}

      </section>

      {}

      <BillPdfViewer

        pdfUrl={bill.pdfUrl}

        archivePdfUrl={bill.archivePdfUrl}

        sourceUrl={bill.sourceUrl}

        billNumber={bill.number}

      />

      {}

      <section className="mt-12" aria-label="Version diff">

        <SectionLabel eyebrow="Version diff" title="What changed in the text" />

        <p

          className="prose-lead mb-6"

          style={{ fontSize: "1rem", color: "var(--dk-ash)" }}

        >

          Added, removed, and amended sections between versions of this bill.

          Sections that entered outside the bill's named subject are flagged as

          riders.

        </p>

        {bill.diffs.length === 0 ? (

          <div className="rounded-[6px] border border-line bg-surface p-6">

            <p

              className="font-prose italic"

              style={{ fontSize: "0.9375rem", color: "var(--dk-ash)" }}

            >

              No section-level diff on file. Some changes enter via voice vote

              or unanimous consent - no individual record exists for those.

            </p>

          </div>

        ) : (

          <div className="space-y-4">

            {riderCount > 0 ? (

              <div

                className="rounded-[6px] border-2 p-6"

                style={{

                  borderColor: "color-mix(in srgb, var(--dk-signal) 45%, transparent)",

                  background: "var(--dk-surface)",

                }}

              >

                <div className="flex items-center gap-2">

                  <RiderFlag />

                  <span

                    className="font-display font-bold text-paper"

                    style={{ fontSize: "1rem" }}

                  >

                    {riderCount} rider-flagged section

                    {riderCount === 1 ? "" : "s"}

                  </span>

                </div>

                <div className="mt-4 space-y-4">

                  {bill.diffs

                    .filter((d) => d.riderFlag)

                    .map((d, i) => (

                      <DiffEntry key={`rider-${i}`} d={d} />

                    ))}

                </div>

              </div>

            ) : null}

            {otherChanges.length > 0 ? (

              <div className="rounded-[6px] border border-line bg-surface p-6">

                <p className="label mb-4" style={{ color: "var(--dk-ash)" }}>

                  Other recorded changes

                </p>

                <div className="space-y-4">

                  {otherChanges.map((d, i) => (

                    <DiffEntry key={`chg-${i}`} d={d} />

                  ))}

                </div>

              </div>

            ) : null}

          </div>

        )}

      </section>

      {}

      <div className="mt-12 grid gap-8 lg:grid-cols-[1.3fr_1fr]">

        {}

        <section aria-label="Status timeline">

          <SectionLabel

            eyebrow={`Timeline · ${bill.timeline.length} action${bill.timeline.length === 1 ? "" : "s"}`}

            title="Actions on this bill"

          />

          {bill.timeline.length === 0 ? (

            <div className="rounded-[6px] border border-line bg-surface p-6">

              <p

                className="font-prose italic"

                style={{ fontSize: "0.9375rem", color: "var(--dk-ash-2)" }}

              >

                No actions are linked to this bill in the record.

              </p>

            </div>

          ) : (

            <div className="rounded-[6px] border border-line bg-surface p-6">

              <ol className="relative space-y-6 border-l border-line pl-5">

                {bill.timeline.map((t, i) => (

                  <li key={i} className="relative">

                    <span

                      aria-hidden="true"

                      className="absolute -left-[1.625rem] top-1 h-2.5 w-2.5 rounded-full border-2 border-line"

                      style={{ backgroundColor: "var(--dk-surface)" }}

                    />

                    <p

                      className="font-prose text-paper"

                      style={{ fontSize: "0.9375rem", lineHeight: 1.5 }}

                    >

                      {t.text}

                    </p>

                    <p className="label mt-1.5" style={{ color: "var(--dk-ash-2)" }}>

                      <span className="font-mono">{formatDate(t.date)}</span>

                      {t.chamber ? ` · ${t.chamber}` : ""}

                      {t.actionType ? ` · ${t.actionType}` : ""}

                    </p>

                    <div className="mt-2">

                      <SourceLink url={t.sourceUrl} />

                    </div>

                  </li>

                ))}

              </ol>

            </div>

          )}

        </section>

        <div className="space-y-8">

          {}

          <section aria-label="Roll-call votes">

            <SectionLabel eyebrow="Votes" title="Roll calls on this bill" />

            <div className="rounded-[6px] border border-line bg-surface p-6">

              {bill.votes.length > 0 ? (

                <p

                  className="font-display font-bold text-paper"

                  style={{ fontSize: "1.0625rem" }}

                >

                  {bill.votes.length} vote{bill.votes.length === 1 ? "" : "s"} recorded.

                </p>

              ) : (

                <p

                  className="font-prose italic"

                  style={{ fontSize: "0.9375rem", color: "var(--dk-ash-2)" }}

                >

                  No roll-call votes are linked to this bill yet. When a vote

                  occurs, it will appear here with a link to the full member

                  roster.

                </p>

              )}

              <p className="label mt-4" style={{ color: "var(--dk-ash-2)" }}>

                Browse all votes on the{" "}

                <Link

                  href="/votes"

                  className="focus-ring rounded-sm underline underline-offset-4 hover:text-paper"

                  style={{ color: "var(--dk-signal)" }}

                >

                  votes register

                </Link>

                .

              </p>

            </div>

          </section>

          {}

          <section aria-label="Bill text versions">

            <SectionLabel

              eyebrow={`Versions · ${bill.versions.length}`}

              title="Bill text versions"

            />

            {bill.versions.length === 0 ? (

              <div className="rounded-[6px] border border-line bg-surface p-6">

                <p

                  className="font-prose italic"

                  style={{ fontSize: "0.9375rem", color: "var(--dk-ash-2)" }}

                >

                  No full-text versions on file.

                </p>

              </div>

            ) : (

              <div className="rounded-[6px] border border-line bg-surface divide-y divide-line">

                {bill.versions.map((v) => (

                  <div

                    key={v.id}

                    className="flex items-center justify-between gap-3 p-4"

                  >

                    <div className="min-w-0">

                      <p

                        className="font-display font-bold text-paper"

                        style={{ fontSize: "0.9375rem" }}

                      >

                        {v.versionCode.toUpperCase()} · {v.versionLabel}

                      </p>

                      <p className="label mt-1" style={{ color: "var(--dk-ash-2)" }}>

                        <span className="font-mono">{formatDate(v.versionDate)}</span>

                      </p>

                    </div>

                    <SourceLink url={v.sourceUrl} label="GovInfo" />

                  </div>

                ))}

              </div>

            )}

          </section>

        </div>

      </div>

      {}

      <section className="mt-12" aria-label="Amendments">

        <SectionLabel

          eyebrow={`Amendments · ${bill.amendments.length}`}

          title="Amendments filed"

        />

        {bill.amendments.length === 0 ? (

          <div className="rounded-[6px] border border-line bg-surface p-6">

            <p

              className="font-prose italic"

              style={{ fontSize: "0.9375rem", color: "var(--dk-ash-2)" }}

            >

              No amendments are linked to this bill.

            </p>

          </div>

        ) : (

          <AmendmentsList amendments={bill.amendments} />

        )}

      </section>

      {}

      <div className="mt-12 border-t border-line pt-8">

        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

          <div>

            <p className="label mb-1" style={{ color: "var(--dk-ash-2)" }}>

              Official record

            </p>

            <p

              className="font-prose"

              style={{ fontSize: "0.9375rem", color: "var(--dk-ash)" }}

            >

              Full text, sponsor, and all actions on Congress.gov.

            </p>

          </div>

          <SourceLink url={bill.sourceUrl} label="Congress.gov" />

        </div>

        {}

        <p className="label mt-8" style={{ color: "var(--dk-ash-2)" }}>

          No comment, reaction, or share surface appears on this page, by policy.

        </p>

      </div>

      {}

      <div className="mt-8">

        <p className="label mb-4" style={{ color: "var(--dk-ash)" }}>

          Cite this record

        </p>

        <CiteThis

          kind="bill"

          title={`${bill.number} - ${bill.title}`}

          permalink={`https://usdocket.org/bill/${params.id}`}

          sourceUrl={bill.sourceUrl}

        />

      </div>

    </div>

  );

}

function SectionLabel({

  eyebrow,

  title,

}: {

  eyebrow?: string;

  title: string;

}) {

  return (

    <div style={{ marginBottom: "20px" }}>

      {eyebrow ? (

        <p

          className="label"

          style={{ color: "var(--dk-signal)", marginBottom: "10px", fontSize: "12px", letterSpacing: "0.14em" }}

        >

          {eyebrow}

        </p>

      ) : null}

      <h2

        className="font-display text-paper"

        style={{ fontSize: "clamp(1.2rem, 3.5vw, 1.5rem)", fontWeight: 800, letterSpacing: "-0.02em", textTransform: "uppercase", lineHeight: 1.05 }}

      >

        {title}

      </h2>

    </div>

  );

}

function AmendmentsList({ amendments }: { amendments: BillAmendment[] }) {

  return (

    <ul className="space-y-3" role="list">

      {amendments.map((a) => (

        <li

          key={a.id}

          className="flex flex-col gap-2 rounded-[6px] border border-line bg-surface p-5 sm:flex-row sm:items-center sm:justify-between"

        >

          <div className="min-w-0">

            <p

              className="font-mono text-paper"

              style={{ fontSize: "0.9375rem", fontWeight: 700 }}

            >

              {a.type} {a.number}

            </p>

            {a.sponsor ? (

              <Link

                href={a.sponsor.href}

                className="focus-ring mt-1 label underline underline-offset-4 hover:text-paper"

                style={{ color: "var(--dk-signal)" }}

              >

                {a.sponsor.name}

              </Link>

            ) : null}

          </div>

          <div className="flex items-center gap-3">

            {a.status ? (

              <span className="label" style={{ color: "var(--dk-ash-2)" }}>

                {a.status}

              </span>

            ) : (

              <span className="label" style={{ color: "var(--dk-ash-2)" }}>

                Filed

              </span>

            )}

            <SourceLink url={a.sourceUrl} />

          </div>

        </li>

      ))}

    </ul>

  );

}

function DiffEntry({ d }: { d: BillDiffChange }) {

  return (

    <div className="border-l-2 pl-4" style={{ borderColor: "var(--dk-line)" }}>

      <div className="flex flex-wrap items-center gap-2">

        <ChangeTag change={d.change} />

        {d.riderFlag ? <RiderFlag /> : null}

        <span className="label" style={{ color: "var(--dk-ash-2)" }}>

          <span className="font-mono">

            {d.fromVersion} → {d.toVersion}

          </span>

          {d.sectionId && d.sectionId !== "_"

            ? ` · §${d.sectionId.slice(0, 8)}`

            : ""}

        </span>

      </div>

      <p

        className="mt-2 font-mono leading-relaxed text-paper"

        style={{ fontSize: "0.8125rem" }}

      >

        {d.snippet || "No snippet recorded."}

      </p>

      <div className="mt-2">

        <SourceLink url={d.sourceUrl} />

      </div>

    </div>

  );

}